<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<form action="" method="get" enctype="multipart/form-data">

</form>


<div id="app">
    <p>账号：<input placeholder="账号" v-model="account"></p>
    <p>密码：<input type="password" placeholder="密码" v-model="password"></p>
    <p>姓名：<input placeholder="姓名" v-model="username"></p>
    <p>性别：
        <input type="radio" v-model="sex" value="男">男
        <input type="radio" v-model="sex" value="女">女
    </p>
    <p>验证码：
        <input placeholder="验证码" v-model="code">
        <img :src="imgURl" alt="验证码" @click="changeImg">
        <a href="javascript:void(0)" @click="changeImg">看不清，换一张</a>
    </p>
    <p>地址：
        <select v-model="address">
            <option>请选择</option>
            <option>山西</option>
            <option>河南</option>
            <option>北京</option>
            <option>天津</option>
        </select>
    </p>
    <button @click="regBtn">注册</button>
</div>
<script>
    const {createApp} = Vue;
    const app = createApp({
        data(){
            return{
                account:'',
                password:'',
                username:'',
                sex:'',
                address:'',
                code:'',
                imgURl:"/demo/code"
            }
        },
        methods:{
            regBtn(){
               let xhr = new XMLHttpRequest()
               xhr.open('post','/demo/register')
               // post请求需要单独设置请求头信息
                /**
                 * 表单的数据提交的时候方式有两种,get和post
                 * get方式:表单数据默认:application/x-www-form-urlencoded,会拼接在浏览器的地址栏中
                 * psot方式:数据会卸载请求体中,
                 *    数据格式:application/x-www-form-urlencoded,普通表单,数据依然采用的key=value&key=value&key=value
                 *    数据格式:multipart/form-data,表示表单支持文件上传,同时也支持传递普通的表单数据
                 */
               xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
                // post请求的数据需要在send中去拼接发送
               xhr.send(`code=${this.code}&account=${this.account}&password=${this.password}&username=${this.username}&sex=${this.sex}&address=${this.address}`)
                xhr.addEventListener("readystatechange",function () {
                    if(xhr.readyState === 4 && xhr.status === 200){
                        let result = xhr.responseText
                        if(result === '注册成功'){
                            location.href = '/demo/login.html'
                        }else{
                            alert(result)
                        }
                    }

                })
            },
            changeImg(){
                console.log("11111")
                this.imgURl = '/demo/code?'+Date.now()
            }
        }
    })
    app.mount('#app')
</script>
</body>
</html>